<template>
  <el-dialog
    title="选择地址"
    :visible.sync="isShowDialog"
    width="1000px"
    top="50px"
    append-to-body
  >
    <div class="search">
      <el-input
        placeholder="请输入搜索地址信息"
        v-model="keyword"
        clearable
        @keyup.enter.native="searchAddress"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchAddress"
        ></el-button>
      </el-input>
    </div>

    <div id="mapContainer" style="width: 100%; height: 350px"></div>

    <div class="address">
      <span>当前选点：</span>
      <b>{{
        nowAddress
          ? nowAddress.addressComponents.province +
            nowAddress.addressComponents.city +
            nowAddress.addressComponents.district +
            nowAddress.addressComponents.streetNumber
          : "尚未选点"
      }}</b>
      <el-button
        v-if="nowAddress"
        @click="selectAddress(nowAddress, 1)"
        type="text"
        >【确认选择】</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      keyword: "", // 搜索关键词
      isShowDialog: false, // 是否显示弹窗
      markersArray: [],
      geocoder: null,
      nowAddress: null, // 选择的地点
      geocoderLocation: null,
      countrySelect: "中国",
      provinceSelect: "山东",
      citySelect: "青岛"
    };
  },
  mounted() {},
  methods: {
    // 搜索地址
    searchAddress() {
      if (!this.keyword) {
        return this.$message.error("请输入搜索地址信息");
      }
      this.setLocationByAddress(this.keyword);
    },

    // 初始化地图
    initMap() {
      let that = this;
      let latLon = new qq.maps.LatLng(36.06203, 120.38494);
      var map = new qq.maps.Map(document.getElementById("mapContainer"), {
        zoom: 13,
        center: latLon,
        mapTypeId: qq.maps.MapTypeId.ROADMAP
      });
      var listener = qq.maps.event.addListener(map, "click", function(event) {
        that.setLocationByLatLng(event.latLng.getLat(), event.latLng.getLng());
      });
      // 经纬度解析类回调函数
      this.geocoder = new qq.maps.Geocoder({
        complete: function(result) {
          console.log(result.detail);
          that.nowAddress = result.detail;
          that.nearPointList = result.detail.nearPois;
          that.countrySelect = result.detail.addressComponents.country;
          that.provinceSelect = result.detail.addressComponents.province;
          that.citySelect = result.detail.addressComponents.city;
          map.setCenter(result.detail.location);
          // 标记点
          let marker = new qq.maps.Marker({
            map: map,
            position: result.detail.location
          });
          that.markersArray.push(marker);
          if (that.markersArray.length > 1) {
            for (let i = 0; i < that.markersArray.length - 1; i++) {
              that.markersArray[i].setMap(null); // 清除标记
            }
          }
        }
      });
      // 地址解析回调函数
      this.geocoderLocation = new qq.maps.Geocoder({
        complete: function(result) {
          console.log(result.detail);
          // 查找附近的点
          that.countrySelect = result.detail.addressComponents.country;
          that.provinceSelect = result.detail.addressComponents.province;
          that.citySelect = result.detail.addressComponents.city;
          let latLng = new qq.maps.LatLng(
            result.detail.location.lat,
            result.detail.location.lng
          );
          that.geocoder.getAddress(latLng);
        }
      });
    },

    // 选择地址事件
    selectAddress(item, type) {
      if (type === 1) {
        let addressInfo = item.addressComponents;
        this.$emit(
          "on-select",
          addressInfo.province +
            addressInfo.city +
            addressInfo.district +
            addressInfo.streetNumber,
          item.location.lat,
          item.location.lng
        );
      }
      if (type === 2) {
        this.$emit(
          "on-select",
          item.address + item.name,
          item.latLng.lat,
          item.latLng.lng
        );
      }
    },

    // 显示地图
    show() {
      this.isShowDialog = true;
      setTimeout(() => {
        this.keyword = "";
        this.initMap();
      });
    },

    close() {
      this.isShowDialog = false;
    },

    // 根据经纬度进行定位
    setLocationByLatLng(lat, lng) {
      setTimeout(() => {
        let latLng = new qq.maps.LatLng(lat, lng);
        this.geocoder.getAddress(latLng);
      });
    },
    // 根据地址信息进行定位
    setLocationByAddress(address) {
      setTimeout(() => {
        console.log("搜索地址：", address);
        this.geocoderLocation.getLocation(
          this.countrySelect + this.provinceSelect + this.citySelect + address
        );
      });
    }
  }
};
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 15px;
  margin-top: -20px;
}
.address {
  margin-top: 15px;
  margin-bottom: 10px;
  .el-button {
    padding: 0;
  }
}
.table {
  .el-button {
    padding: 0;
  }
}
</style>
